.loading-bar-mask {
  width: 100%;
  height: 100%;
  position: fixed;
  background-color: var(--el-overlay-color-lighter);
  top: 0;
  left: 0;
}

.loading-bar-container {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  pointer-events: none;
  .loading-bar {
    --loading-bar-width: 300px;
    --loading-bar-height: 10px;
    --loading-bar-display-width: 50%;
    --loading-bar-display-speed: 1.5s;
    width: var(--loading-bar-width);
    height: var(--loading-bar-height);
    background-color: var(--el-border-color-lighter);
    box-shadow: var(--el-box-shadow-light);
    border-radius: var(--loading-bar-radius);
    position: relative;
    overflow: hidden;
    &::after {
      content: '';
      position: absolute;
      left: 0;
      right: 0;
      background: var(--loading-bar-fg);
      width: var(--loading-bar-display-width);
      height: var(--loading-bar-height);
      border-radius: var(--loading-bar-radius);
      transform: translateZ(0);
      animation: loading-bar-animation var(--loading-bar-display-speed) infinite;
    }
    &-label {
      color: var(--loading-bar-color);
      text-align: center;
      margin-top: 4px;
    }
  }
}

@keyframes loading-bar-animation {
  0% {
    transform: translateX(-50%);
  }

  to {
    transform: translateX(220%);
  }
}
